<template>
  <div class="tab-container">
    <van-tabs v-model="active" >
      <van-tab v-for="(tab, index) in tabs" :key="index" :title="tab.name">
        <template v-if="getDataFiled(tab.list).length == 0">
          <div class="no-data-img">
            <img src="../../assets/meeting/no-data.png">
            <p>暂无相关数据~</p>
          </div>
        </template>
        <template v-else>
          <van-cell-group v-for="(item,index) in getDataFiled(tab.list)" :key="index" 
          class="margin-t-12">
            <van-cell :title="item.title" is-link @click="toAdd(item.tplid, item.tpltype)"></van-cell>
          </van-cell-group>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        active: 0,
        tabs: [{
          name: "全部",
          list: "allList",
          type: '3'
        },{
          name: "收文",
          list: "acceptList",
          type: "1"
        },{
          name: "发文",
          list: "postList",
          type: "2"
        }],
        allList: [],
        acceptList: [],
        postList: [],
        list:[],
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '公文拟稿'})
    },
    mounted() {
      this.$bridge.callHandler('navTitle', {title: '公文拟稿'})
      this.getList('allList', "3")
      this.getList('acceptList', "1")
      this.getList('postList', "2")
    },
    methods:{
      getDataFiled (dataFiled) {
        return this[dataFiled]
      },
      /**
       * 公文分类列表
       * @return {[type]} [description]
       */
      getList (target, type) {
        let config = {
          method: "POST",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: "applist",
            user_id: this.$store.state.userId,
            type: type
          }
        }
        this.$axios(config).then(res => {
          this[target] = res.data
        }).catch(err => {

        })
      },
      /**
       * 添加公文
       * @return {[type]} [description]
       */
      toAdd (tplid, tpltype) {
        /*let config = {
          method: "post",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: "documentadd",
            tplid: tplid,
            tpltype: tpltype,
            user_id: this.$store.state.userId || 1
          }
        }
        this.$axios(config).then(res => {
          console.log(res.data)
          this.$router.push({ name:"documentsForm", query:{tplid: res.data.tplid, appid: res.data.appid, flowid: res.data.flowid, perid: res.data.perid} })
        }).catch(err => {
          this.$toast(err.msg)
        })*/
        this.$router.push({name:"documentsForm", query:{tplid: tplid, tpltype: tpltype}})
      }
    }
  }
</script>

<style lang="less" >
  .tab-container {
    background-color: #f5f5f5;
    min-height: calc(100vh - 50px);
    .van-cell-group {
      margin-bottom: 15px;
      background-color: #f5f5f5;
      .van-cell {
        display: flex;
        align-items: center;
      }
    }
    .van-tabs__wrap {
      padding: 0 40px;
      background-color: #fff;

      span {
        font-size: 14px;
      }
    }
    .margin-t-12 {
      margin-top: 12px;
    }
    .no-data-img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #f5f5f5;
      padding: 50% 0;

      img {
        width: 180px;
        height: 106px;
        text-align: center;
      }

      p{
        font-size: 17px;
        color: #333333
      }
    }
  }
  
</style>
